<template>
  <div :style="getLineStyle(data)" class="divider_line"></div>
</template>

<script type="text/ecmascript-6">


export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    getLineStyle(item) {
      if (!item) {
        return
      }

      let obj
      if (item.view_type == 'divider_line') {
        let body = item.body, height, borderBottom, backgroundColor, color

        if (body.line_height == "6") {
          height = '0.04rem'
        }
        if (body.line_height == "24") {
          height = '0.16rem'
        }
        if (body.line_height == "2") {
          height = '0.02rem'
        }
        if (body.line_height == "10") {
          height = '0.0666667rem'
        }

        color = body.line_color

        obj = {
          height,
          borderBottom: `${height} solid ${color}`,
          backgroundColor: color,
          boxSizing: 'border-box'
        }
      }



      let res = {}
      for (let key in obj) {
        if (obj[key] != undefined || obj[key] != null) {
          res[key] = obj[key]
        }
      }

      return res
    }
  }
}

</script>

<style lang="stylus" scoped ref="stylesheet/stylus"></style>